<script>
init({
  title: 'Row Attributes',
  desc: 'Use `rowAttributes` option to set the row attributes. You can hover the table row to view the example.',
  links: ['bootstrap-table.min.css'],
  scripts: ['bootstrap-table.min.js']
})
</script>

<template>
  <table
    id="table"
    data-toggle="table"
    data-height="460"
    data-url="json/data1.json"
    data-row-attributes="rowAttributes"
  >
    <thead>
      <tr>
        <th data-field="id">
          ID
        </th>
        <th data-field="name">
          Item Name
        </th>
        <th data-field="price">
          Item Price
        </th>
      </tr>
    </thead>
  </table>
</template>

<script>
  window.rowAttributes = (row, index) => ({
    'data-toggle': 'popover',
    'data-placement': 'bottom',
    'data-trigger': 'hover',
    'data-content': [
      `Index: ${index}`,
      `ID: ${row.id}`,
      `Name: ${row.name}`,
      `Price: ${row.price}`
    ].join(', ')
  })

  function mounted () {
    $('#table').on('post-body.bs.table', () => {
      $('[data-toggle="popover"]').popover()
    })
  }
</script>
